<template>
  <div class="position-full">
    <input :type="inputData.obscureText?'password':'type'" :value="text" :placeholder="inputData.placeholder"
           :style="{...styles,...textStyle}"
           class="position-full input-widget">
    <!-- <i v-if="state.clearable && state.valueCtl.dftVal" :style="{lineHeight: `${widget.rect.height}px`}"
       class="iconfont icon-reeor-fill input-clear-icon display-none" @click="clear"></i> -->
  </div>
</template>

<script>
  import {formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {WidgetInput} from "@/modules/IDE/widget/atom/widgetInput";

  export default {
    name: 'InputWidget',
    props: {
      widget: {
        type: WidgetInput,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {tempRect = {}} = this.widget;
        const styles = {};
        const {height: sHeight = 0} = tempRect;
        sHeight && (styles.lineHeight = `${sHeight}px`);
        styles.textAlign = 'center'
        return styles;
      },
      textStyle() {
        const {textStyle = {}} = this.state;
        const textStyles = {};
        // 字体
        const {size: fSize, color, weight, align} = textStyle;
        fSize && (textStyles.fontSize = `${fSize}px`);
        color && (textStyles.color = formatColor(color, this.activeTheme));
        weight && (textStyles.fontWeight = weight);
        align && (textStyles.textAlign = align);
        return textStyles;
      },
      text() {
        const {values = {}} = this.state;
        const {text = ''} = values;
        return text
      },
      inputData() {
        const {data = {}} = this.widget.UI;
        return data
      }
    },

    methods: {
      clear() {
        this.state.valueCtl.value = '';
      }
    }
  };
</script>

<style scoped lang="less">
  .input-widget {
    background: transparent;
    border: none;
    padding: 0 0 0 15px !important;
    width: calc(100% - 15px);
    cursor: all-scroll !important;
  }

  .input-clear-icon {
    position: absolute;
    top: 0;
    right: 3px;
    bottom: 0;
    width: 30px;
    text-align: center;
    font-size: 20px;
    color: #e2e2e2;
    cursor: pointer;
  }
</style>
